<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="../js/vue2-dev.js"></script>
        <style>
            * {
                padding-left: 5px;
                margin-top: 10px;
            }

            .father {
                display: flex;
                justify-content: space-between;
            }

            .son_left,
            .son_right {
                width: 50%;
            }

            #content {
                padding: 10px;
                background-color: skyblue;
            }
        </style>
    </head>
    <body>
        <!-- 
            事件修饰符有6个：
                1.prevent —— 阻止默认事件发生
                2.stop —— 阻止事件冒泡
                3.once —— 事件只触发一次
                4.capture —— 使用事件的捕获模式
                5.self —— 只有event.target是当前操作的元素时才触发事件
                6.passive —— 事件的默认行为立刻执行，无需等到事件回调执行完毕
         -->
        <div class="father">
            <div class="son_left">
                <h1>正常情况</h1>
                <div>
                    <span>默认没加prevent修饰符的a标签：</span>
                    <a href="http://baidu.com" @click="preventfun">百度一下</a>
                </div>
                <hr />
                <div>
                    <p>div和默认没加stop修饰符的button：</p>
                    <div id="content" @click="stopfun">
                        <button @click="stopfun">没加stop修饰符</button>
                    </div>
                </div>
                <hr />
                <div>
                    <span>默认没加once修饰符的按钮：</span>
                    <button @click="oncefun">没加once修饰符</button>
                </div>
                <hr />
                <div>
                    <p>默认没加capture修饰符的div和button：</p>
                    <div id="content" @click="capturefun('father')">
                        <button @click="capturefun('son')">
                            父级div没加capture修饰符
                        </button>
                    </div>
                </div>
                <hr />
                <div>
                    <p>默认没加self修饰符的div和button：</p>
                    <div id="content" @click="selffun('father')">
                        <button @click="selffun('son')">
                            父级div没加self修饰符
                        </button>
                    </div>
                </div>
                <hr />
                <div>
                    <span>默认不加passive修饰符的滚轮：</span>
                    <div style="height: 100px; overflow: auto" @="passivefun">
                        <div style="height: 200px"></div>
                    </div>
                </div>
            </div>
            <div class="son_right">
                <h1>添加事件修饰符之后</h1>
                <div>
                    <span>加了prevent修饰符的a标签：</span>
                    <a href="http://baidu.com" @click.prevent="preventfun"
                        >百度一下</a
                    >
                </div>
                <hr />
                <div>
                    <p>div和加了stop修饰符的button：</p>
                    <div id="content" @click="stopfun">
                        <button @click.stop="stopfun">加了stop修饰符</button>
                    </div>
                </div>
                <hr />
                <div>
                    <span>加了once修饰符的按钮：</span>
                    <button @click.once="oncefun">加了once修饰符</button>
                </div>
                <hr />
                <div>
                    <p>加了capture修饰符的div和button：</p>
                    <div id="content" @click.capture="capturefun('father')">
                        <button @click="capturefun('son')">
                            父级div加了capture修饰符
                        </button>
                    </div>
                </div>
                <hr />
                <div>
                    <p>加了self修饰符的div和button：</p>
                    <div id="content" @click.self="selffun('father')">
                        <button @click="selffun('son')">
                            父级div加了self修饰符
                        </button>
                    </div>
                </div>
                <hr />
                <div>
                    <span>加了passive修饰符的滚轮：</span>
                    <div
                        style="height: 100px; overflow: auto"
                        @wheel.passive="passivefun"
                    >
                        <div style="height: 200px"></div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            const vm = new Vue({
                methods: {
                    preventfun() {
                        console.log("有关prevent修饰符的a标签被点击了");
                    },
                    stopfun() {
                        console.log("有关stop修饰符的元素被点击了");
                    },
                    oncefun() {
                        console.log("有关once修饰符的元素被点击了");
                    },
                    capturefun(message) {
                        console.log(
                            "有关capture修饰符的元素被点击了：" + message
                        );
                    },
                    selffun(message) {
                        console.log(
                            message +
                                "有关self修饰符的元素被点击了,下面event.target"
                        );
                        console.log(event);
                    },
                    passivefun() {
                        setTimeout(() => {}, 2000);
                    },
                },
            });
            vm.$mount(".father");
        </script>
    </body>
</html>
